<!--
 * @Date: 2023-01-13 11:39:30
 * @LastEditTime: 2023-07-03 17:27:05
 * 介绍:状态标签
-->
<script lang="ts" setup name="CstateTag">
import type { CstateTagEmun } from "./index";
const className = {
  bg: "CstateTag__bg",
  text: "CstateTag__text",
};

const props = withDefaults(
  defineProps<{
    enum?: CstateTagEmun;
    value?: string | number;
    mode?: keyof typeof className;
  }>(),
  {
    mode: "bg",
  }
);
const current = computed(() => {
  return props.enum?.filter((val) => val.value == props.value)[0];
});
</script>

<template>
  <text
    :style="(current?.style as any)"
    :class="[className[props.mode || 'bg'], current?.class]"
    class="CstateTag"
  >
    <slot :="{ ...current }"> {{ current?.text }} </slot>
  </text>
</template>

<style lang="less" scoped>
.CstateTag {
  display: inline-block;
  vertical-align: middle;
  font-size: var(--T-S-sm);
  padding: 0.3em 1em;
}
.CstateTag__bg {
  color: var(--C-B1);
  border-radius: 999rem;
  text-align: center;
  background-color: var(--C-M1);
}
.CstateTag__text {
  text-align: center;
}
</style>
